<script setup lang="ts">
  import { ref, computed } from "vue";
  import { onLoad } from '@dcloudio/uni-app';
  import lottery from "./components/lottery/lottery.vue";
  import { strParse } from "@/util";
  const
    list = ref<gt.sql.prize[]>([]),
    isApple = computed(() => uni.getSystemInfoSync().platform.toLowerCase() == "ios"),
    gz = ref<{ content: string[]; ios?: boolean; }[]>([]),
    prizeIndex = ref(-1),
    frist = ref(true),
    oid = ref(""),
    show = ref(false)
    ;
  async function init(q: any) {
    show.value = false;
    uni.showLoading({ title: "正在加载,请稍后!" });
    if (q && q.id) {
      try {
        gz.value = strParse((await gd.setting.read({ id: "prize", ios: isApple.value }))[0].value);
      } catch (_) {
        gz.value = [];
      }
      if (!(Array.isArray(gz.value) && gz.value.length)) {
        const n: string = (await gd.setting.getById("websiteName"))?.value || "xxx";
        gz.value = [
          { content: ["抽奖细则:", "每消费并成功支付拥有一次抽奖机会。"] },
          { content: ["奖励说明:", "a.现金奖：系统会即时转入账户余额，可提现。", "b.实物奖：中奖后需联系客服领取。"] },
          { content: [`本次活动由 ${n} 发起${isApple.value ? "，与Apple.Inc无关" : ""}。`] },
          { content: ["苹果公司不是本活动的赞助商且没有以任何形式参与活动。"], ios: true },
          { content: ["本活动仅限17岁以上用户参加。"] },
          { content: [`本活动最终解释权归 ${n} 所有。`] }
        ];
      }
      if (!isApple.value) {
        let l = gz.value.length;
        while (l-- > 0) {
          if (gz.value[l].ios) {
            gz.value.splice(l, 1);
          }
        }
      }
      try {
        const r: gt.sql.prize[] | undefined = await api.request(q, "prizeLottery");
        if (r) {
          prizeIndex.value = r.findIndex(e => e.sum);
          list.value = r;
          frist.value = true;
          show.value = true;
          oid.value = q.id;
          uni.hideLoading();
          return;
        }
      } catch (_) { }
    }
    setTimeout(() => {
      uni.hideLoading();
      uni.reLaunch({ url: "/pages/index" });
    }, 5000);
  }
  onLoad(init);
  function start(c: cbk) {
    if (frist.value) {
      msg({ title: "多次抽奖不会改变奖品种类", icon: "none" });
    }
    c(prizeIndex.value);
  }

  function end() {
    uni.showModal({
      title: `恭喜抽中:[${list.value[prizeIndex.value].name}] 快去购买地兑付吧!`,
      success(r) {
        if (r.confirm) {
          uni.redirectTo({ url: "/pages2/prize?id=" + oid.value });
        }
      }
    });
  }
</script>
<template>
  <view class="almost-lottery" v-if="show">
    <!-- rule -->
    <view class="almost-lottery__rule">
      <view class="rule-head">
        <view class="line"></view>
        <text class="title">活动规则</text>
        <view class="line"></view>
      </view>
      <view class="rule-body">
        <view class="item" v-for="(i, ii) in gz" :key="ii">
          <view class="number">{{ ii + 1 }}</view>
          <view class="text" :class="i.content.length > 2 ? 'y' : ''">
            <text v-for="j in i.content">{{ j }}</text>
          </view>
        </view>
      </view>
    </view>
    <!-- lottery -->
    <view class="almost-lottery__wheel">
      <lottery :list="list" @start="start" @end="end" />
    </view>
  </view>
</template>

<style lang="scss" scoped>
  .almost-lottery {
    flex: 1;
    background-color: #FF893F;
    min-height: 100%;
  }
  .almost-lottery__wheel {
    text-align: center;
    .almost-lottery__count {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      padding: 40rpx 0;
    }
    .text {
      color: #FFFFFF;
      font-size: 24rpx;
    }
  }

  .almost-lottery__rule {
    padding: 0 28rpx;
    color: #FFF8CB;
    .rule-head {
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin: 40rpx 0;
      .line {
        flex: 1;
        height: 1px;
        background-color: #FFF3A5;
      }
      .title {
        width: 280rpx;
        color: #F63857;
        line-height: 70rpx;
        text-align: center;
        margin: 0 20rpx;
        border-radius: 8rpx;
        background-image: linear-gradient(0deg, rgba(255, 242, 158, 1), rgba(255, 244, 168, 1));
      }
    }
    .rule-body {
      color: #FFF8CB;
      font-size: 24rpx;
      padding: 10rpx 0 40rpx;
      .item {
        display: flex;
        margin-bottom: 10rpx;
      }
      .number {
        position: relative;
        top: 4rpx;
        width: 28rpx;
        height: 28rpx;
        line-height: 28rpx;
        text-align: center;
        color: #F63857;
        background: #FFF8CB;
        border-radius: 50%;
        margin-right: 10rpx;
      }
      .text {
        flex: 1;
      }
      .item-rule .text {
        display: flex;
        flex-direction: column;
      }
    }
  }

  .almost-lottery__action-dev {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 400rpx;
    height: 80rpx;
    border-radius: 10rpx;
    text-align: center;
    background-color: red;
    margin: 0 auto 40rpx;
    .text {
      color: #FFFFFF;
      font-size: 28rpx;
    }
  }

  .almost-lottery__popup-wrap {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;

    .almost-lottery {
      background: transparent;
    }
  }
</style>
